<!-- <template>
  <div id="app">
    <transition :name="transitionName">
        <router-view class="child-view"></router-view>
      </transition>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      fullHeight: document.documentElement.clientHeight,
      transitionName: 'slide-left'
    };
  },
  mounted () {
    window.addEventListener('resize', () => {
      this.fullHeight = document.documentElement.clientHeight;
    });
  },
  watch: {
    '$route' (to, from) {
      console.log(from);
      if (to.path === '/') {
        this.transitionName = 'slide-right';
      } else {
        this.transitionName = 'slide-left';
      }
    }
  }
};
</script>

<style>
body {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  overflow: hidden;
  font-family: "Microsoft YaHei", 'Avenir', Helvetica, Arial, sans-serif;
}
#app {
  height: 100hv;
  width: 100%;
  /* background-image: url('./assets/bg_all_1.png');
  background-repeat: no-repeat;
  background-size: 100% 100%; */
}
ul, li {
    list-style:none;
}
.child-view {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: all 1s;
}
.slide-left-enter {
  opacity: 0;
  -webkit-transform: translate(0,100%);
  transform: translate(0, 100%);
}
.slide-left-leave-active {
  opacity: 0;
  -webkit-transform: translate(0, -100%);
  transform: translate(0, -100%);
}
.slide-right-leave-active {
  opacity: 0;
  -webkit-transform: translate(0,100%);
  transform: translate(0, 100%);
}
.slide-right-enter {
  opacity: 0;
  -webkit-transform: translate(0, -100%);
  transform: translate(0, -100%);
}
</style> -->
<template>
      <div id="app">
        <router-view v-transition></router-view>
    </div>
</template>
<script>
export default {
  name: 'app',
  data () {
    return {
      // fullHeight: document.documentElement.clientHeight,
    };
  },
  mounted () {
    // window.addEventListener('resize', () => {
    //   this.fullHeight = document.documentElement.clientHeight;
    // });
  }
};
</script>
<style>
body {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  overflow: hidden;
  font-family: "Microsoft YaHei", 'Avenir', Helvetica, Arial, sans-serif;
}
#app {
  height: 100%;
  width: 100%;
}
ul, li {
    list-style:none;
}
a {
  text-decoration:none;
}
.bg {
  background: url('./assets/bg_all_1.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.bg2 {
  background: url('./assets/bg_all_2.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
</style>
